<!-- 标签管理 -->
<template>
  <div class="home">
    <el-card style="width: 35%">
      <template #header>
        <div class="card-header">
          <span>添加标签</span>
        </div>
      </template>

      <el-form :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.label" placeholder="输入标签名称" />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="formInline.value"
            placeholder="输入标签值（请输入英文，作为路由使用）"
          />
        </el-form-item>

        <el-form-item v-if="!flag">
          <el-button type="primary" @click="add">保存</el-button>
        </el-form-item>

        <el-form-item v-else>
          <el-button type="primary" @click="update">更新</el-button>

          <el-button @click="back">返回添加</el-button>

          <el-popconfirm
            title="确认删除这个标签?"
            confirm-button-text="确认"
            cancel-button-text="取消"
            @confirm="del()"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="width: 60%">
      <template #header>
        <div class="card-header">
          <span>所有标签</span>
        </div>
      </template>

      <el-button v-for="(item, index) in list" :key="index" @click="edit(item)">
        {{ item.label }}
      </el-button>
    </el-card>
  </div>
</template>

<script setup>
import { apiTags, apiAddTags, apiUpdateTags, apiDelTags } from "@/api/tags";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

/**************************************************/

const list = ref([]);

const formInline = ref({
  id: "",
  label: "",
  value: "",
});

const flag = ref(false);

/**************************************************/

const add = () => {
  apiAddTags(formInline.value)
    .then((res) => {
      ElMessage({
        message: res.msg,
        type: "success",
      });

      formInline.value = {};

      getList();
    })
    .catch(() => {
      formInline.value = {};
    });
};

// 更新
const edit = (item) => {
  flag.value = true;

  formInline.value = item;
};

const update = () => {
  apiUpdateTags(formInline.value).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    formInline.value = {};

    flag.value = false;

    getList();
  });
};

// 返回添加
const back = () => {
  formInline.value = {};

  flag.value = false;
};

// 删除
const del = () => {
  apiDelTags(formInline.value).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    formInline.value = {};

    flag.value = false;

    getList();
  });
};

/**************************************************/

const getList = () => {
  apiTags().then((res) => {
    list.value = res.data;
  });
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.home {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
</style>
